<template>
  <div class="add-switch" :style="{'inset': location}">
    <div class="add-s-block" style="margin-top: 2px;">
      <div>{{currentZoom}}</div>
    </div>
    <div class="add-s-block">
      <div v-if="zoomMax" class="add-zoom-out"></div>
      <div v-else class="add-zoom" @click="addZoom"></div>
    </div>
    <div class="add-s-block">
      <div v-if="zoomMin" class="sub-zoom-out"></div>
      <div v-else class="sub-zoom" @click="subZoom"></div>
    </div>
  </div>
</template>

<script>
import CTMapOl from '@ct/ct_map_ol';
import { debounce } from 'lodash';

export default {
  name: "mapZoom",
  data(){
    return{
      zoomMax: false,
      zoomMin: false,
      currentZoom: '',
    }
  },
  props: {
    location:{
      type: String,
      default: 'auto 10px 10px auto'
    },
    map:{
      type:Object,
      required: true,
    }
  },
  created() {
    this.zoomShow();
  },
  methods: {
    addZoom() {
      let zoom = +this.getZoomLevel();
      CTMapOl.api.fixZoomin(this.map);
      this.zoomMin = false;
      this.zoomMax = zoom + 1 === 18;
    },
    //地图减去zoom
    subZoom() {
      let zoom = +this.getZoomLevel();
      CTMapOl.api.fixZoomout(this.map);
      this.zoomMax = false;
      this.zoomMin = zoom + 1 === 5;
    },
    /**
     * 地图层级显示
     */
    zoomShow(){
      let zoom = this.getZoomLevel();
      this.zoomMin = +zoom === 5;
      this.zoomMax = +zoom === 18;

      //显示当前地图层级
      this.watchAndGetZoom((zoom)=>{
        setTimeout(()=>{
          let max = 18;
          let min = 5;
          this.zoomMin = +zoom <= min;
          this.zoomMax = +this.getZoomLevel() >= max;
          this.controlZoomShowMinAndMax(zoom);
          if (String(zoom).includes('.')) {
            this.currentZoom = zoom.toFixed(0);
          } else {
            this.currentZoom = zoom;
          }
          this.$emit('mapZoomNum', zoom)
        });
      }, this.mapId);
    },
    getZoomLevel(){
      return this.map.getView().getZoom();
    },
    watchAndGetZoom(successFn){
      this.executeFunction(successFn, this.getZoomLevel());
      this.watchZoomChange(()=>{
        this.executeFunction(successFn, this.getZoomLevel());
      });
    },
    /**
     * 监听地图层级改变
     */
    watchZoomChange(successFn) {
      this.map.on('moveend',  debounce((resp) => {
        this.executeFunction(successFn, resp);
      }), 5000);
    },

    /**
     * 控制地图层级最大和最小
     * @param zoom
     */
    controlZoomShowMinAndMax(zoom){
      let max = 18;
      let min = 5;
      if(zoom > max){
        zoom = max;
      }
      if(zoom < min){
        zoom = min;
      }
    },
    executeFunction(func, param, param2, param3) {
      if (func) {
        if (param != null) {
          func(param, param2, param3);
        } else {
          func();
        }
      }
    }

  }
}
</script>



<style scoped lang="scss">
.add-switch {
  position: absolute;
  right: 30px;
  height: 68px;
  width: 30px;
  bottom: 112px;
  background: #FFFFFF 100%;
  color: #172537;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  //box-shadow: 0 2px 6px 0 rgba(161,176,195,0.7);
  box-shadow: 0 2px 5px 0 rgba(0, 0,0,0.15);
}

.add-s-line {
  height: 1px;
  width: 13px;
  background-color: #17253759;
  border: none;
}

.add-s-block {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 20px;
  font-size: 12px;
  margin-bottom: 2px;
  color: #172537;
}

.add-zoom {
  width: 20px;
  height: 20px;
  background-image: url('../../assets/image/ar/switch/add-zoom.svg');
  background-size: 100% 100%;
  cursor: pointer;
}

.sub-zoom {
  width: 20px;
  height: 20px;
  background-image: url('../../assets/image/ar/switch/sub-zoom.svg');
  background-size: 100% 100%;
  cursor: pointer;
}

.add-zoom-out {
  width: 20px;
  height: 20px;
  background-image: url('../../assets/image/ar/switch/add-zoom-out.svg');
  background-size: 100% 100%;
}

.sub-zoom-out {
  width: 20px;
  height: 20px;
  background-image: url('../../assets/image/ar/switch/sub-zoom-out.svg');
  background-size: 100% 100%;
}

.add-s-block.btn-click {
  cursor: pointer;
}
</style>
